<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
	</head>
	<body>
		<!--
			data-loading-text="Loading for 3 seconds" 等待的效果  ""中是显示的 文字
			 autocomplete="off" 点击之后按钮颜色加深
		-->
		<div class="container">
			<button type="button" data-loading-text="Loading for 3 seconds" class="btn btn-primary js-loading-btn">Loading state</button>
			
			<button type="button" class="btn btn-default" data-toggle="button" autocomplete="off">您好</button>
			
			<div class="btn-group" data-toggle="buttons">
				<!--用label 代替 button -->
				<label class="btn btn-primary active">
					<input type="checkbox" autocomplete="off" checked/>选择1
				</label>
				<label class="btn btn-primary ">
					<input type="checkbox" autocomplete="off" />选择2
				</label>
				<label class="btn btn-primary ">
					<input type="checkbox" autocomplete="off" />选择2
				</label>
			</div>
			<div class="btn-group" data-toggle="buttons">
				<label class="btn btn-primary active">
					<input type="radio" name="options" autocomplete="off" checked />单选1
				</label>
				<label class="btn btn-primary ">
					<input type="radio" name="options" autocomplete="off" checked />单选2
				</label>
				<label class="btn btn-primary ">
					<input type="radio" name="options" autocomplete="off" checked />单选3
				</label>
				<label class="btn btn-primary ">
					<input type="radio" name="options" autocomplete="off" checked />单选4
				</label>
			</div>
			<!--
				点击hello之后直接将其完成finish
			-->
			<button type="button" data-complete-text="finish" class="btn btn-default mybutton" autocomplete="off">哈哈</button>
			
		</div>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script>
			$(".js-loading-btn").on("click",function(e){
				var btn=$(this).button("loading");
				setTimeout(function(e){
					btn.button("reset")//复原 reset
				},3000)
			})
			$('.mybutton').on('click', function () {

				$(this).button('complete');
			})
		</script>
	</body>
</html>
